<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Anthor" content="wangqin273" />
    <title>获取 类名 兼容ie</title>
    <style>
        *{
            border:0;
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            padding: 10px;
            margin: 10px auto;
            color: #000;
            line-height: 2em;
            font-size: 16px;
            background-color: #dfdfdf;
        }
        p{
            width: 400px;
            padding: 10px;
            margin: 10px auto;
            border: 1px solid #ccc;
        }
        ul{
            width: 400px;
            margin: 50px auto;
        }
        ul:after{
            content: "";
            display: block;
            clear: both;
        }
        ul li{
            list-style:none;
            border:1px solid #ccc;
            border-radius: 5px;
            float: left;
            padding: 5px 10px;
            margin-left: 5px;
            background-color: #dfdfdf;
            cursor: pointer;
            margin-bottom: 5px;
            text-align: center;
        }
        ul li:nth-child(1){
            background-color: #3ea540;
            color: #fff;
        }

        .bg{
            background-color: #8ce0ff;
        }
        .on{
            border:2px solid #ff6600;
        }
        .blue{
            color: #0e93ff;
        }
        .big{
            font-size: 24px;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li>获取所有类名含bg的元素字体改变红色<br>兼容ie所有版本</li>
</ul>
<div id="box">
    我是Div标签0
</div>
<div class="bg">
    我是Div标签1
</div>
<div class="bg on">
    我是Div标签2
</div>
<div class="bg on blue">
    我是Div标签3
</div>
<div class="bg on blue big">
    我是Div标签4
</div>
<p class="blue">我是一个P标签段落</p>
<script src="addClass.js"></script>
<script>
    var btn = document.getElementsByTagName("li");
//  使用自定义函数获取类名为bg的元素
    var  aDiv = getClass("bg");
    var lens = aDiv.length;
// 添加点击时间测试结果
    btn[0].onclick=function () {
        for (var i=0;i<lens;i++ ){
            addClass(aDiv,"red",lens)
        }
    }

//  自定义函数getClass获取类名
    function getClass(hasclass) {
        // 获取所有标签
       var tags = document.getElementsByTagName("*"),
           length = tags.length,
        //  自定义一个数组 用来储存 含有hasclass的元素
               els =[];
        for(var i=0;i<length;i++){

            var strClass = '',
                arrClass = [];
            //  获取元素的类名，储存在一个字符串
            strClass = tags[i].className;
            //  把类名字符串以空格为切割符 转化为数组
            arrClass = strClass.split(" ");
            lens = arrClass.length;
            // 遍历数组 查看是否含有类名hasclass 如果有就拥有这个类名的元素添加到一个数组中
            for(var j=0;j< arrClass.length;j++){
                if(hasclass==arrClass[j]){
                    els.push(tags[i])
                }
            }
        }
//     返回这个储存含hasclass的元素的数组
        return els
    }


</script>
</body>
</html>